<template>
  <div class="companyTree">
    <div class="title" v-if="treeTitle">{{ treeTitle }}</div>
    <div class="tree">
      <el-input class="search" v-model="filterText" placeholder="" :suffix-icon="Search" />
      <el-tree
        ref="treeRef"
        class="filter-tree"
        node-key="id"
        :data="companyData"
        :props="defaultProps"
        default-expand-all
        highlight-current
        :show-checkbox="isShow"
        :defaultCheckedKeys="defaultCheckedKeys"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        @check="handleCheckBoxClick"
      >
        <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <!--<span class="oper">
                  <img :src="image.rapCompanyAdd" @click="e => handleAppend(data, e)" />
                  <img :src="image.rapCompanyEdit" @click="e => handleUpdate(data, e)" />
                  <img :src="image.rapCompanyDelete" @click="e => handleRemove(data, e)" />
                </span>-->
              </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // 需要导入watch监听
  import { ref, useAttrs, watch, computed } from 'vue'
  // 以下两项需要导入
  import { ElTree } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  const emits = defineEmits(['handleNodeClick','handleFilterChange'])

  /*
   * 功能-用于获取树结构相关属性
   * Date: 2023-7-25
   * Author: 陈凌
   * {
   *   treeTitle：树标题
   *   companyData：要显示的数据集
   *   defaultProps：数据集关键结构
   * }
   */
  const props = defineProps<{
    treeTitle?: String;
    companyData: Array;
    defaultProps?: Array;
    isShow?: boolean;
    defaultCheckedKeys?: Array;
  }>()
  // 以下为树控件必须的部分
  const defaultProps = {
    children: 'children',
    label: 'label'
  }
  const treeData = ref(props.companyData)
  const filterText = ref('')
  const filterDate = ref([])
  const treeRef = ref<InstanceType<typeof ElTree>>()
  // 手动重写树控件的setChecked方法
  const setChecked = (key, checked, deep) => {
    treeRef.value.setChecked(key, checked, deep)
  }
  const setSearch = () => {
    filterText.value = ""
  }
  const getSearch = () => {
    return filterText.value
  }
  const getFilterDate = () => {
    console.log("====", filterDate.value)
  }
  //将方法暴露出去
  defineExpose({
    setChecked,
    setSearch,
    getSearch,
    getFilterDate
  })
  watch(filterText, (val) => {
    treeRef.value!.filter(val)
    filterDate.value = treeRef.value.store.root.childNodes
  })
  interface Tree {
    [key: string]: any
  }
  // 树节点被点击
  const handleNodeClick = (data, node, treeNode, e) => {
    emits('handleNodeClick', data, node, treeNode, e)
  }
  const handleCheckBoxClick = (node, checkedNodes) => {
    const permNodes = treeRef.value.getCheckedNodes()
    const childNodes = treeRef.value.root.childNodes
    emits('handleCheckBoxClick', node, checkedNodes, permNodes, childNodes)
  }
  const handleFilterChange = (value) => {
    emits('handleFilterChange', value)
  }

  // 搜索过滤
  const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
  }
  // 以上为树控件必须的部分

</script>
<style lang="less" scoped>
  .el-input {
    margin-bottom: 10px;
    /*border-bottom: #2F7DF1 1px solid;*/
    border-radius: 4px;
  }
  .container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #f5f7f9;
    min-height: 100%;
    overflow: hidden;
    .companyTree {
      padding: 24px;
      margin: 12px 0 24px 12px;
      background: #FFF;
      border-radius: 8px;
      .title {
        font-size: 16px;
        font-family: "HarmonyOS_Sans_SC_Medium";
        border-left: #2F7DF1 2px solid;
        text-indent: 1em;
        color: #353A42;
        line-height: 16px;
        margin: 10px 0;
      }
      /deep/ .el-tree-node__content {
        height: 32px;
      }
      /deep/ .el-tree-node:focus>.el-tree-node__content{
        background-color: #5daaf0;   //背景色
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .oper {
          display: flex;
          justify-content: center;
          align-items: center;
          user-select: none;
          img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            &:hover {
              transform: scale(1.1);
            }
          }
          img+img {
            margin-left: 8px;
          }
          .border {
            border-radius: 4px;
            border: 1px solid #2F7DF1;
            padding: 2px;
            box-sizing: border-box;
            margin-left: 8px;
          }
        }
      }
    }
  }
</style>
